<script setup lang="ts">
  import { Repl, type SFCOptions } from '@vue/repl'
  import Monaco from '@vue/repl/monaco-editor'
  import type { UserOptions } from '@/composables/store'
  import { useStore } from '@/composables/store'

  import mainCode from '@/example/cesium/main.vue?raw'
  import appCode from '@/example/cesium/app.vue?raw'
  import elementPlusCode from '@/example/cesium/element-plus.js?raw'
  import tsconfigCode from '@/example/cesium/tsconfig.json?raw'
  import cesiumCode from '@/example/cesium/cesium.js?raw'

  const loading = ref(true)
  const replRef = ref<InstanceType<typeof Repl>>()
  // code 文件
  const filesCode = {
    mainCode,
    appCode,
    elementPlusCode,
    tsconfigCode,
    cesiumCode,
  }
  // enable experimental features
  const sfcOptions: SFCOptions = {
    script: {
      reactivityTransform: true,
      defineModel: true,
    },
  }

  const initialUserOptions: UserOptions = {}

  const store = useStore({
    serializedState: location.hash.slice(1),
    userOptions: initialUserOptions,
    filesCode,
  })

  store.init().then(() => (loading.value = false))

  console.log('Store:', store)

  const handleKeydown = (evt: KeyboardEvent) => {
    if ((evt.ctrlKey || evt.metaKey) && evt.code === 'KeyS') {
      evt.preventDefault()
      return
    }
  }

  const dark = useDark()

  // persist state
  watchEffect(() => history.replaceState({}, '', `#${store.serialize()}`))

  const refreshPreview = () => {
    replRef.value?.reload()
  }
</script>
<template>
  <div v-if="!loading" antialiased>
    <Header :store="store" @refresh="refreshPreview" />
    <Repl
      ref="replRef"
      :editor="Monaco"
      :theme="dark ? 'dark' : 'light'"
      :store="store"
      show-compile-output
      auto-resize
      :sfc-options="sfcOptions"
      :clear-console="false"
      @keydown="handleKeydown"
    />
  </div>
  <template v-else>
    <div v-loading="{ text: 'Loading...' }" h-100vh></div>
  </template>
</template>
<style>
  body {
    --at-apply: m-none text-13px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
      'Open Sans', 'Helvetica Neue', sans-serif;
    --base: #444;
    --nav-height: 50px;
  }

  .vue-repl {
    height: calc(100vh - var(--nav-height)) !important;
  }

  .dark .vue-repl,
  .vue-repl {
    --color-branding: var(--el-color-primary) !important;
  }

  .dark body {
    background-color: #1a1a1a;
  }
</style>
